<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4895ef;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
        }

        .gradient-bg {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        }

        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: none;
            border-radius: 15px;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .quick-action-btn {
            background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
            border: none;
            border-radius: 10px;
            padding: 12px 25px;
            color: white;
            transition: all 0.3s ease;
        }

        .quick-action-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
            color: white;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .welcome-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            color: white;
            padding: 3rem;
            margin-bottom: 3rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 10px 0;
            font-size: 1.1rem;
        }

        .feature-list i {
            color: var(--success-color);
            margin-right: 10px;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark gradient-bg shadow">
    <div class="container">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/">
            <i class="bi bi-shield-lock-fill me-2"></i>权限管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="${pageContext.request.contextPath}/">
                        <i class="bi bi-house-door me-1"></i>首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/users">
                        <i class="bi bi-people me-1"></i>用户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/roles">
                        <i class="bi bi-person-badge me-1"></i>角色管理
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容 -->
<div class="container my-5">
    <!-- 欢迎区域 -->
    <div class="welcome-section text-center">
        <h1 class="display-4 fw-bold mb-4">欢迎使用权限管理系统</h1>
        <p class="lead mb-4">基于MyBatis的高级多表联合查询实践项目</p>
    </div>

    <div class="row">
        <!-- 系统功能 -->
        <div class="col-lg-6 mb-4">
            <div class="card feature-card h-100 shadow-sm">
                <div class="card-header bg-white border-0 pt-4">
                    <h3 class="card-title text-center">
                        <i class="bi bi-list-check text-primary me-2"></i>系统功能
                    </h3>
                </div>
                <div class="card-body">
                    <ul class="feature-list">
                        <li><i class="bi bi-check-circle-fill"></i>用户信息查询（包含角色信息）</li>
                        <li><i class="bi bi-check-circle-fill"></i>角色信息查询（包含权限信息）</li>
                        <li><i class="bi bi-check-circle-fill"></i>多条件用户搜索</li>
                        <li><i class="bi bi-check-circle-fill"></i>分页查询功能</li>
                        <li><i class="bi bi-check-circle-fill"></i>MyBatis高级映射配置</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 快速操作 -->
        <div class="col-lg-6 mb-4">
            <div class="card feature-card h-100 shadow-sm">
                <div class="card-header bg-white border-0 pt-4">
                    <h3 class="card-title text-center">
                        <i class="bi bi-lightning-charge text-warning me-2"></i>快速操作
                    </h3>
                </div>
                <div class="card-body d-flex flex-column justify-content-center">
                    <div class="d-grid gap-3">
                        <a href="${pageContext.request.contextPath}/users?action=detail&username=admin"
                           class="btn quick-action-btn">
                            <i class="bi bi-person me-2"></i>查看admin用户详情
                        </a>
                        <a href="${pageContext.request.contextPath}/roles?action=detail&roleId=1"
                           class="btn quick-action-btn">
                            <i class="bi bi-shield me-2"></i>查看管理员角色详情
                        </a>
                        <a href="${pageContext.request.contextPath}/users?action=search"
                           class="btn quick-action-btn">
                            <i class="bi bi-search me-2"></i>综合用户查询
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 统计信息 -->
    <div class="row mt-4">
        <div class="col-md-4 mb-3">
            <div class="card text-center feature-card">
                <div class="card-body">
                    <i class="bi bi-people display-4 text-primary"></i>
                    <h5 class="card-title mt-2">用户管理</h5>
                    <p class="card-text">管理系统中所有用户信息和权限分配</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card text-center feature-card">
                <div class="card-body">
                    <i class="bi bi-shield-check display-4 text-success"></i>
                    <h5 class="card-title mt-2">角色管理</h5>
                    <p class="card-text">定义和管理不同角色的权限范围</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card text-center feature-card">
                <div class="card-body">
                    <i class="bi bi-diagram-3 display-4 text-info"></i>
                    <h5 class="card-title mt-2">权限控制</h5>
                    <p class="card-text">精细化的权限管理和访问控制</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="gradient-bg text-white text-center py-4 mt-5">
    <div class="container">
        <p class="mb-0">&copy; 2024 权限管理系统. 基于MyBatis高级应用实践.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>